*{ margin:0; padding:0;}
html{ font-size:100px;/*  -webkit-text-size-adjust:none; */}
body{  font-size:0.16rem; font-family:"黑体"; overflow-x:hidden}
body,html{ width:100%; height:100%; }
ul{ list-style:none;}
a{ text-decoration:none; color:#ececec}
.clearfix:after{
    content:'';
	display:block;
	clear:both;
	height:0;
}

/*头部*/
.header{
    position:relative;
    width:100%;
	height:100%;
}
.header .header-bg{
    position:absolute;
	z-index:-1;
    /* overflow:hidden; */
    width:100%;
	height:100%;
}
.header .header-bg .header-bg-img{
    position:absolute;
	left:0;
	top:0;
    width:100%;
	height:100%;
	background-image:url("../images/header-bg.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.header .header-bg .header-bg-black{
    position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.6;
}
.header .header-center{
    padding-top:2.2rem;
	margin-left:calc(50% - 3.15rem);
	margin-left:-moz-calc(50% - 3.15rem);
	margin-left:-webkit-calc(50% - 3.15rem);
	width:6.3rem;
    text-align:center;
}


/*头部动画*/
.header .header-center .title{
    position:relative;
    margin-left:calc(50% - 1.6rem);
	margin-left:-moz-calc(50% - 1.6rem);
	margin-left:-webkit-calc(50% - 1.6rem);
    width:3.2rem;
	/* animation:anim 1.5s cubic-bezier(0.8,0.2,0.5,1) forwards; */
}
@keyframes anim{
    0%{
	    left:200%;
	}
	90%{
	    left:-3%;
	}
	100%{
	    left:0;
	}
}
.header .header-center .title .bor-left,.header .header-center .title .bor-top,.header .header-center .title .bor-right,.header .header-center .title .bor-bottom{
    position:absolute;
	background:#fff;
}
.header .header-center .title .bor-left{
    left:0;
	bottom:0.61rem;
    width:0.01rem;
	height:0;
	animation:animLeft 0.33s 2s ease-out forwards;
}
@keyframes animLeft{
    from{
	    height:0rem;
	}
	to{
	    height:0.3rem;
	}
}
.header .header-center .title .bor-top{
    left:0;
	top:0;
    width:0;
	height:0.01rem;
	animation:animTop 1s 2.33s ease-out forwards;
}
@keyframes animTop{
    from{
	    width:0;
	}
	to{
	    width:100%;
	}
}
.header .header-center .title .bor-right{
    right:0;
	top:0.61rem;
    width:0.01rem;
	height:0;
	animation:animRight 0.33s 2s ease-out forwards; 
}
@keyframes animRight{
    from{
	    height:0;
	}
	to{
	    height:0.3rem;
	}
}
.header .header-center .title .bor-bottom{
    right:0;
	bottom:0;
    width:0;
	height:0.01rem;
	animation:animBottom 1s 2.33s ease-out forwards; 
}
@keyframes animBottom{
    from{
	    width:0;
	}
	to{
	    width:100%;
	}
}
.header .header-center .title .dot{
    position:absolute;
    left:0.16rem; 
    top:-1.4rem;
    width:0.1rem;
	height:0.1rem; 
	animation:animDot 3s 3s ease-in forwards;
}
@keyframes animDot{/*控制x轴*/
    0%{
		 transform:translateX(0rem);
	}
	10%{/*弹起1*/
	    transform:translateX(0.06rem);
	    animation-timing-function:ease-out;
	}
	 13%{/*掉落2*/
	   transform:translateX(0.12rem);
       animation-timing-function:ease-in;
	}
	 17%{/*弹起2*/
	    transform:translateX(0.15rem);
		animation-timing-function:ease-out;
	} 
	22%{/*掉落3*/
	    transform:translateX(0.18rem);
		animation-timing-function:ease-in;
	}
	25%{/*弹起3*/
	    transform:translateX(0.19rem);
		animation-timing-function:ease-out;
	}
	28%{/*掉落4*/
	    transform:translateX(0.2rem);
		animation-timing-function:ease-in;
	}
	650%{/*滚动*/
	   transform:translateX(0.47rem);
	}
	70%{/*滚动后 掉落5*/
	    transform:translateX(0.47rem);
	}
	73%{/*弹起4*/
	   transform:translateX(0.50rem);
	   animation-timing-function:ease-out;
	}
	75%{/*掉落5*/
	    transform:translateX(0.53rem);
		animation-timing-function:ease-in;
	}
	80%{
	    transform:translateX(0.61rem);
		animation-timing-function:ease-out;
	}
	83%{
	    transform:translateX(0.72rem);
		animation-timing-function:ease-in;
	}
	85%{
	    transform:translateX(0.80rem);
		animation-timing-function:ease-out;
	}
	88%{
	    transform:translateX(0.9rem);
		animation-timing-function:ease-in;
	}
	90%{
	    transform:translateX(0.96rem);
	}
	93%{
	    transform:translateX(0.99rem);
	} 
	95%{
	    transform:translateX(0.99rem);
	}
	100%{
	    transform:translateX(0.96rem);
	}
}
.header .header-center .title .dot:after{
    content:'';
	display:block; 
	opacity:0;
    width:0.1rem;
	height:0.1rem;
	background:#ececec;
	border-radius:50%;
	animation:animDot2 3s 3s ease-out forwards;
}
@keyframes animDot2{/*控制y轴*/
    0%{
	    opacity:1;
	    transform:translateY(0rem);
	}
    5%{/*掉落1*/
	    transform:translateY(1.29rem);
	    
	}
	10%{/*弹起1*/
	    transform:translateY(1.23rem);
		animation-timing-function:ease-in;
	    
	}
	 13%{/*掉落2*/
	     transform:translateY(1.29rem);
		 animation-timing-function:ease-out;
	}
	 17%{/*弹起2*/
	    transform:translateY(1.26rem);
		animation-timing-function:ease-in;
	} 

	22%{/*掉落3*/
	    transform:translateY(1.29rem);
		animation-timing-function:ease-out;
	}
	25%{/*弹起3*/
	    transform:translateY(1.28rem);
		animation-timing-function:ease-in;
	}
	28%{/*掉落4*/
	    transform:translateY(1.29rem);
        animation-timing-function:ease-out;
	}
	65%{/*滚动*/
	    transform:translateY(1.29rem);
	}
	70%{/*滚动后 掉落5*/
	    transform:translateY(1.47rem);
	}
	73%{/*弹起4*/
	    transform:translateY(1.44rem);
		animation-timing-function:ease-in;
	}
	75%{/*掉落5*/
	     transform:translateY(1.47rem);
		animation-timing-function:ease-out;
	}
	 80%{
	    transform:translateY(1.45rem); 
        animation-timing-function:ease-in;
	}
	83%{
	    transform:translateY(1.64rem); 
		animation-timing-function:ease-out;
	}
	 85%{
	   transform:translateY(1.60rem); 
       animation-timing-function:ease-in;
	}
	88%{
	   transform:translateY(1.65rem); 
	   animation-timing-function:ease-out;
	}
	90%{
	    transform:translateY(1.68rem); 
	}
	93%{
	   transform:translateY(1.74rem); 
	}
	95%{
	   transform:translateY(2.02rem); 
	}
	100%{
	    transform:translateY(2.02rem);
	    opacity:1;
	}
}
/*头部动画结束*/
.header .header-center h3{
    font-size:0.8rem;
	font-family:"宋体";
	color:#ececec;
	margin-bottom:0.9rem;
}

.header .header-center p{
    line-height:0.3rem;
    color:#ececec;
}
.header .header-center .text-border{
    margin-top:0.7rem;
    margin-left:calc(50% - 0.75rem);
	margin-left:-moz-calc(50% - 0.75rem);
	margin-left:-webkit-calc(50% - 0.75rem);
    width:1.5rem;
	height:0.5rem;
	border:1px solid #ececec;
}
.header .header-center .text-border a{
    display:block;
    line-height:0.5rem;
}